<template>
    <div class="gp_main_panel">
        <div class="app-content">
            <div class="layout-root">
                <div class="layout-header">
                    <div class="width100 headerRow">
                        <div class="float-left header-route">
                            <a-space class="table-content-input table-content-task">
                                <div>
                                    <label class="table-search-label">batch：</label>
                                    <a-input v-model:value="search_qs.batch" placeholder="" allowClear style="width: 150px;"></a-input>
                                </div>
                                <div>
                                    <label class="table-search-label">satellite：</label>
                                    <a-select v-model:value="search_qs.satellite" placeholder="" style="width: 150px;"
                                        :options="$store.state.satellite" allowClear size="small"
                                        :field-names="{ label: 'name', value: 'value' }" @change="search_task">
                                    </a-select>
                                </div>
                                <div>
                                    <label class="table-search-label">date：</label>
                                    <a-input v-model:value="search_qs.date" placeholder="" allowClear style="width: 150px;"></a-input>
                                </div>
                                <div>
                                    <label class="table-search-label">type：</label>
                                    <a-select v-model:value="search_qs.type" placeholder="" style="width: 150px;"
                                        :options="$store.state.type" allowClear size="small"
                                        :field-names="{ label: 'name', value: 'value' }" @change="search_task">
                                    </a-select>
                                </div>
                                <div>
                                    <label class="table-search-label">景号：</label>
                                    <a-input v-model:value="jing_name" placeholder="" allowClear style="width: 650px;"></a-input>
                                </div>
                            </a-space>
                        </div>
                        <div style="float: right;line-height: 60px;">
                            <a-space class="table-content-input table-content-task">
                                <a-button type="primary" class="button28 processA" @click="search_task">查询</a-button>
                            </a-space>
                        </div>
                    </div>
                </div>
                <div class="layout-content position">
                    <!--   -->
                    <a-table :data-source="task_table_data" :columns="task_table_columns"
                        class="task-table" size="small" :showHeader="true" tableLayout="fixed"
                        :pagination="task_table_pagination"
                        @change="task_table_pagination_change"
                        :customRow="task_table_row_event"
                        bordered rowKey="_id">
                        <template #bodyCell="{ text, record, index, column }">
                            <template v-if="column.dataIndex == 'path'">
                                <a href="javascript:;" @click="show_task_msg(record?.path)">查看信息</a>
                            </template>
                            <template v-if="column.dataIndex == 'download'">
                                <a href="javascript:;" @click="download(record?.path)">下载</a>
                            </template>
                            
                            <template v-else-if="column.dataIndex === 'operation'">
                                <span class="table-operation">
                                    <a-dropdown>
                                        <a class="ant-dropdown-link" @click.prevent>编辑
                                            <DownOutlined />
                                        </a>
                                        <template #overlay>
                                            <a-menu>
                                                <a-menu-item >
                                                    <a-popconfirm title="强制开始?" ok-text="确定"
                                                        cancel-text="取消" @confirm="init_task(record)">
                                                        <a href="javascript:;">强制开始</a>
                                                    </a-popconfirm>
                                                </a-menu-item>
                                                <a-menu-item v-if="record?.state==4">
                                                    <a-popconfirm title="强制完成?" ok-text="确定"
                                                        cancel-text="取消" @confirm="end_task(record)">
                                                        <a href="javascript:;">强制完成</a>
                                                    </a-popconfirm>
                                                </a-menu-item>
                                                <a-menu-item >
                                                    <a href="javascript:;" @click="show_task(record)">查看生产情况</a>
                                                </a-menu-item>
                                                <a-menu-item v-if="record?.state==5">
                                                    <a-popconfirm title="删除任务?" ok-text="确定"
                                                        cancel-text="取消" @confirm="del_task(record)">
                                                        <a href="javascript:;">删除任务</a>
                                                    </a-popconfirm>
                                                </a-menu-item>
                                            </a-menu>
                                        </template>
                                    </a-dropdown>
                                </span>
                            </template>
                        </template>
                    </a-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { notification } from 'ant-design-vue';
import {defineAsyncComponent } from 'vue' 
export default {
    data() {
        return {
            search_qs: {
                batch: "",
                satellite: "",
                date: "",
                type:"",
            },
            jing_name:"",
            task_table_columns: [
                {
                    title: '序号',
                    dataIndex: '_id',
                    align: 'center',
                    ellipsis: true,
                    width: '170px',
                },
                {
                    title: 'batch',
                    dataIndex: 'batch',
                    align: 'center',
                    width: '170px',
                    ellipsis: true,
                },
                {
                    title: 'satellite',
                    dataIndex: 'satellite',
                    align: 'center',
                    width: '50px',
                    ellipsis: true,
                },
                {
                    title: 'indexnum',
                    dataIndex: 'indexnum',
                    align: 'center',
                    width: '50px',
                    ellipsis: true,
                },
                {
                    title: 'guidao',
                    dataIndex: 'guidao',
                    align: 'center',
                    width: '100px',
                    ellipsis: true,
                },
                {
                    title: 'date',
                    dataIndex: 'date',
                    align: 'center',
                    width: '100px',
                },
                {
                    title: 'name',
                    dataIndex: 'name',
                    align: 'center',
                    width: '200px',
                    ellipsis: true,
                },
                
                {
                    title: 'path',
                    dataIndex: 'path',
                    align: 'center',
                    width: '80px',
                },
                {
                    title: 'download',
                    dataIndex: 'download',
                    align: 'center',
                    width: '80px',
                },

                
                // {
                //     title: '操作',
                //     width: 80,
                //     dataIndex: 'operation',
                //     align: 'center'
                // },
            ],
            task_table_row_event: (record) => {
                return {
                    onDblclick: (event) => {
                        // this.dblclick_row(record);
                    },
                };
            },
            task_table_pagination: {
                current: 1,
                size: 'small',
                pageSize: 10,
                total: 0,
                showTotal: (total, range) => {
                    return `共 ${total},${range[0]}/${range[1]}`
                },
            },
            task_table_data: [],
        }
    },
    async mounted() {
        let loading = document.getElementById('Loading')
        if (loading != null) {
            document.body.removeChild(loading);
        }
        this.openNotificationWithIcon = (type, msg, duration = 2) => {
            notification[type]({
                message: '提示',
                description: msg,
                duration: duration,
            });
        };
        this.search_task()
    },
    methods: {
        async search_task() {
            if(this.jing_name){
                let splits=this.jing_name?.split("_")
                //LT1A_MONO_KSC_STRIP1_007638_E109.8_N39.4_20230623_SLC_HH_S2A_0000138921
                if(splits?.length==12){
                    this.search_qs.satellite=splits[0]
                    this.search_qs.date=splits[7]
                }
            }
            let new_search_qs = JSON.parse(JSON.stringify(this.search_qs))
            let qs_result = await this.$apis.get_jg(new_search_qs)
            console.log(qs_result)
            if (qs_result?.result) {
                this.task_table_data=[]
                qs_result?.result?.sort((a,b)=>{
                    let a_atime=(new Date(a?.date?.substr(0, 4) + '-' + a?.date?.substr(4, 2) + '-' + a?.date?.substr(6, 2)))?.getTime()
                    let b_atime=(new Date(b?.date?.substr(0, 4) + '-' + b?.date?.substr(4, 2) + '-' + b?.date?.substr(6, 2)))?.getTime()
                    return b_atime-a_atime
                })
                this.task_table_data=qs_result?.result
            }
            else{
                this.task_table_data =[]
            }
        },
        task_table_pagination_change(pagination) {
            this.task_table_pagination.current = pagination.current
            if (pagination.pageSize != this.task_table_pagination.pageSize) {
                this.task_table_pagination.pageSize = pagination.pageSize
                this.task_table_pagination.current = 1
            }
            // this.search_task()
        },
        show_task_msg(msg) {
            this.openNotificationWithIcon('success', `${msg} `)
        },
        async download(path){
            let qs_result = await this.$apis.download_jg({
                key: path,
            })
            if(qs_result){
                this.$message.info("添加下载成功")
                this.search_task()
            }
            else{
                this.$message.info("没有查询到任务的详细信息")
            }
            return true
        },
    },
};
</script>
<style >
#nprogress .bar {
  height: 4px !important;
}
.white-collapse .ant-form-item{
    margin-bottom: 12px;
}
.ant-alert-message{
    font-size: 12px;
}
</style>